:root {--primary: #58437e;--primary-dark: #53565b;--secondary: #2B2D42;--accent: #AE2C00;--blue: #110066;--light-bg: #edf2f4;--white: #fff;--black: #000;--text: #2B2D42;--text-light: #8D99AE;--border: #EDF2F4;--card-shadow: 0 2px 15px rgba(43, 45, 66, 0.08);--transition: all 0.2s ease;}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5;color:var(--text);background-color:var(--light-bg);padding:30px;max-width:800px;margin:0 auto;}
.container{padding: 0 0 60px 0;}
a {text-decoration: none;}
a:hover {text-decoration:underline}
header{background-color:var(--primary);color:var(--white);padding:25px;border-radius:8px;margin-bottom:30px;box-shadow:0 2px 10px rgba(0,0,0,.1);text-transform: none;}
header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}
header a{color:var(--white)}
header a:hover{text-decoration: none;}
header p{font-size:1.1rem;opacity:.9;color:var(--white)}
section{margin-bottom:2rem}
.card{background-color:var(--white);border-radius:12px;padding:2rem;box-shadow:var(--card-shadow);margin-bottom:1.5rem}
h2{font-size:1.1rem;color:var(--primary);margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:0px solid var(--border)}
h3{font-size:1rem;color:var(--text);margin:1.5rem 0 1rem 0}
p{margin-bottom:1rem;color:var(--text-light);white-space: pre-wrap;word-wrap: break-word;}
code{font-family: 'Fira Code', 'Courier New', monospace;background-color: var(--light-bg);padding: .2rem .4rem;border-radius: 4px;color: var(--accent);white-space: pre-wrap;word-break: break-word;overflow-wrap: anywhere;max-width: 100%;box-sizing: border-box;}
pre{background-color:var(--light-bg);padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}
pre code{background:0 0;padding:0;color:var(--blue)}
#url-script, #direkt-script {cursor: pointer;}
.source-script:hover::before, .source-script:hover::after  {opacity: 1;}
.source-script .keyword   { color: #c93791; } 
.source-script .string    { color: #0020d8; } 
.source-script .number    { color: #69ce33; } 
.source-script .function  { color: #098b1f; } 
.source-script .variable  { color: #994a00; } 
input[type=text]{width:100%;padding:.8rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;margin-bottom:1rem;transition:var(--transition)}
input[type=text]:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 2px rgba(66,133,244,.2)}
button{background-color:var(--primary);color:var(--white);border:none;padding:.5rem 1rem;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:var(--transition)}
button:hover{background-color:var(--primary-dark)}
.rbtn{justify-self: end;display: flex;}
footer{text-align: center;padding-top: 1rem;color: var(--text-light);margin-top: 1rem;position: fixed;left: 0;right: 0;bottom: 1rem;z-index: -1;}
footer p {margin:0;}
@media (max-width:768px){
  body{padding:0;}
  header{border-radius: 0;}
  header h1{font-size:2rem;border-radius: 0;}
  footer {padding-bottom: 1rem;}
  .card{padding:1.5rem;border-radius: 0;}
  .source-script,code,pre{white-space:pre-wrap;word-wrap:break-word;}
}