/* Kathrin-Seite – Design nach Brand & Design (Playfair Display + Maven Pro, selbst gehostet, keine Anfragen an Dritte).
   Farben: Anthrazit #3C3C3B · Champagner Gold #D1A75C · Petrol #0F759D · Greige #F5F1EB · Off-White #FAFAF8 */
@font-face{font-family:'Maven Pro';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/maven-pro-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Maven Pro';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/maven-pro-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:900;font-style:normal;font-display:swap;src:url('/fonts/playfair-display-latin-900-normal.woff2') format('woff2')}
:root{--anthrazit:#3C3C3B;--gold:#D1A75C;--petrol:#0F759D;--greige:#F5F1EB;--offwhite:#FAFAF8}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--greige);color:var(--anthrazit);font-family:'Maven Pro',Arial,sans-serif;font-size:17px;line-height:1.55;display:flex;flex-direction:column;min-height:100vh}
header{padding:20px 48px;display:flex;justify-content:space-between;align-items:center}
.marke{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:22px;letter-spacing:.5px}
.marke span{color:var(--gold)}
.kontext{font-size:14px;color:#6b6b69}
.kontext a{color:var(--petrol);text-decoration:none;font-weight:600}
footer{padding:14px 48px 20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#6b6b69}
.mitte{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 24px 24px}
.karte{background:var(--offwhite);border-radius:22px;box-shadow:0 18px 50px rgba(60,60,59,.12);width:100%;max-width:560px;padding:44px 48px 36px;text-align:center;border-top:5px solid var(--gold)}
.foto{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid var(--offwhite);box-shadow:0 0 0 3px var(--gold);margin-bottom:20px}
h1{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:36px;line-height:1.15;margin:0 0 6px}
.rolle{color:var(--petrol);font-weight:600;margin:0 0 20px;font-size:16px;letter-spacing:.3px}
.linie{width:64px;height:3px;background:var(--gold);border:0;margin:0 auto 22px;border-radius:2px}
p.text{margin:0 0 26px}
.knopf{display:inline-flex;align-items:center;gap:14px;background:var(--anthrazit);color:#fff;border:0;border-radius:12px;padding:15px 28px;font-family:inherit;font-weight:600;font-size:17px;cursor:pointer;text-decoration:none;box-shadow:0 6px 16px rgba(60,60,59,.25)}
.knopf:hover{background:#2c2c2b}
.ms{display:grid;grid-template-columns:10px 10px;grid-gap:2px}
.ms i{display:block;width:10px;height:10px}
.ms .r{background:#F25022}.ms .g{background:#7FBA00}.ms .b{background:#00A4EF}.ms .y{background:#FFB900}
.hinweis{margin:24px 0 0;font-size:14px;color:#6b6b69}
/* Chat */
.chat{flex:1;display:flex;flex-direction:column;width:100%;max-width:860px;margin:0 auto;padding:0 24px 8px;min-height:0}
.kopf{display:flex;align-items:center;gap:14px;padding:4px 0 12px}
.kopf img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--gold)}
.kopf b{font-family:'Playfair Display',Georgia,serif;font-size:20px}
.kopf small{display:block;color:var(--petrol);font-weight:600}
#verlauf{flex:1;overflow-y:auto;background:var(--offwhite);border-radius:18px;box-shadow:0 10px 30px rgba(60,60,59,.08);padding:18px;display:flex;flex-direction:column;gap:12px;min-height:300px;max-height:calc(100vh - 340px)}
.blase{max-width:86%;padding:12px 16px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
.blase.ich{align-self:flex-end;background:var(--anthrazit);color:#fff;border-bottom-right-radius:4px}
.blase.sie{align-self:flex-start;background:var(--greige);border-bottom-left-radius:4px}
.blase.hinweis-blase{align-self:center;background:transparent;color:#6b6b69;font-size:14px}
.aktion{align-self:flex-start;border:2px solid var(--gold);background:#fff;border-radius:14px;padding:12px 16px;max-width:86%}
.aktion p{margin:0 0 10px}
.aktion button{font-family:inherit;font-weight:600;font-size:15px;border-radius:10px;padding:8px 18px;border:0;cursor:pointer;margin-right:8px}
.aktion .ja{background:var(--petrol);color:#fff}
.aktion .nein{background:var(--greige);color:var(--anthrazit)}
.aktion .erledigt{color:#6b6b69;font-size:15px}
.schnell{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 8px}
.schnell button{font-family:inherit;font-weight:600;font-size:15px;background:var(--offwhite);border:2px solid var(--gold);color:var(--anthrazit);border-radius:999px;padding:8px 16px;cursor:pointer}
.schnell button:hover{background:var(--gold);color:#fff}
.eingabe{display:flex;gap:10px;align-items:flex-end}
.eingabe textarea{flex:1;font-family:inherit;font-size:17px;border:2px solid #d9d4ca;border-radius:12px;padding:10px 14px;resize:vertical;min-height:54px;max-height:200px;background:#fff;color:var(--anthrazit)}
.eingabe textarea:focus{outline:2px solid var(--petrol);border-color:var(--petrol)}
.eingabe .knopf{padding:13px 22px}
.denkt{color:#6b6b69;font-style:italic}
/* Admin */
.admin{max-width:760px;margin:0 auto;padding:0 24px 24px;width:100%}
.admin table{width:100%;border-collapse:collapse;background:var(--offwhite);border-radius:12px;overflow:hidden}
.admin th,.admin td{text-align:left;padding:10px 14px;border-bottom:1px solid #e6e1d7;font-size:15px;vertical-align:top}
.admin td.daten{font-size:13px;color:#555;word-break:break-word;max-width:420px}
.admin button{font-family:inherit;font-weight:600;border:0;border-radius:8px;padding:6px 14px;cursor:pointer;background:var(--anthrazit);color:#fff}
.admin button.rot{background:#b3261e}
.admin h2{font-family:'Playfair Display',Georgia,serif;margin:22px 0 10px}
@media(max-width:640px){header,footer{padding-left:18px;padding-right:18px}.karte{padding:30px 22px}h1{font-size:30px}#verlauf{max-height:calc(100vh - 380px)}}