/* Hörtagebuch – tagebuch.dorokcloud.de
   Eigene Welt innerhalb der dorokcloud: ein Tonstudio bei Nacht, in dem ein
   Tagebuch aus Papier liegt. Dunkler Rahmen, helle Seiten. Nunito wie überall
   in der dorokcloud, dazu Fredoka für die Überschriften. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* Studio */
  --nacht:#141D26; --nacht2:#1B2833; --pult:#243444; --pult2:#2C3F52;
  --kante:#3A5268; --neon:#35D6A8;
  --hell:#EAF1F6; --hell-leise:#9FB3C4;

  /* Papier */
  --papier:#FBF8F2; --papier2:#F3EEE3; --papierlinie:#E5DDCC;
  --tinte:#23292F; --tinte-leise:#5E6A75;

  /* Farbwelten: Gebäude, Cover, Wortgruppen */
  --koralle:#FF6B5A; --mango:#FFB03B; --mint:#35D6A8; --meer:#3FA9D9;
  --flieder:#A87BD6; --moos:#6FBF52;  --sand:#D9A441;

  --display:'Fredoka',system-ui,sans-serif;
  --body:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --rund:16px;
  --schatten:0 10px 30px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{background:var(--nacht);-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0 0 4rem;
  font-family:var(--body);font-size:17px;line-height:1.55;
  color:var(--hell);background:var(--nacht);
  background-image:
    radial-gradient(ellipse at 8% -5%, rgba(53,214,168,.14), transparent 45%),
    radial-gradient(ellipse at 95% 4%, rgba(63,169,217,.13), transparent 42%),
    radial-gradient(ellipse at 50% 108%, rgba(255,107,90,.10), transparent 48%);
  background-attachment:fixed;
  min-height:100vh;
}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0 0 .45em}
h1{font-size:clamp(1.9rem,5.2vw,2.9rem)}
h2{font-size:clamp(1.4rem,3.6vw,1.9rem)}
h3{font-size:1.2rem}
p{margin:.35em 0 .9em}
a{color:var(--mint)}
.rahmen{max-width:62rem;margin:0 auto;padding:0 1rem}

/* ---------------------------------------------------- Dachzeile und Kopf */

.dachzeile{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  max-width:62rem;margin:0 auto;padding:.7rem 1rem;
  font-size:.88rem;color:var(--hell-leise);
}
.dachzeile a{color:var(--hell-leise);text-decoration:none}
.dachzeile a:hover{color:var(--hell)}
.dachzeile .bereich{display:flex;align-items:center;gap:.35rem;color:var(--hell);font-weight:700}
.dachzeile .rechts{margin-left:auto;display:flex;align-items:center;gap:.8rem}
.dachzeile .rechts a{text-decoration:underline}

.kopf{padding:1.2rem 0 .6rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.kopf .logo{width:56px;height:56px;flex:none}
.kopf .titelblock{min-width:0}
.kopf h1{margin:0;font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:.01em}
.kopf .unterzeile{color:var(--hell-leise);font-size:.95rem}
.kopf .kopf-rechts{margin-left:auto;text-align:right;font-size:.85rem;color:var(--hell-leise)}

.ich{display:inline-flex;align-items:center;gap:.5rem;background:var(--pult);
  border:2px solid var(--kante);border-radius:999px;padding:.25rem .8rem;color:var(--hell);font-weight:700}
.ich small{font-weight:400;color:var(--hell-leise)}

/* Fortschrittsbalken als Pegelanzeige */
.pegel{width:190px;height:12px;border-radius:7px;background:#0D141B;border:2px solid var(--kante);overflow:hidden;margin-top:.35rem}
.pegel i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--mint),var(--meer) 55%,var(--koralle));transition:width .5s ease}

/* -------------------------------------------------------------- Schritte */

.schritte{display:flex;gap:.5rem;overflow-x:auto;padding:.6rem 1rem;margin:0 auto;max-width:62rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.schritte::-webkit-scrollbar{display:none}
.schritt{
  flex:none;display:flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--pult);border:2px solid var(--kante);border-radius:12px;
  padding:.45rem .85rem;color:var(--hell);font-family:var(--display);font-weight:500;font-size:1rem;
  transition:.15s;-webkit-tap-highlight-color:transparent;
}
.schritt:hover{border-color:var(--mint)}
.schritt .nr{width:1.5rem;height:1.5rem;flex:none;border-radius:50%;background:var(--kante);color:var(--hell);
  display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:600}
.schritt.aktiv{background:var(--mint);border-color:var(--mint);color:#0A1A16}
.schritt.aktiv .nr{background:#0A1A16;color:var(--mint)}
.schritt.fertig .nr{background:var(--mint);color:#0A1A16}
.schritt.fertig .nr::after{content:"✓"}
.schritt.fertig .nr span{display:none}

/* ----------------------------------------------------------- Karten */

.karte{
  background:var(--pult);border:2px solid var(--kante);border-radius:var(--rund);
  padding:1.3rem 1.4rem;margin:1.1rem 0;box-shadow:var(--schatten);
}
.karte.hell{background:var(--pult2)}
.karte h2:first-child,.karte h3:first-child{margin-top:0}

/* Papierseite – das Tagebuch selbst */
.seite{
  position:relative;background:var(--papier);color:var(--tinte);
  border-radius:var(--rund);padding:1.4rem 1.5rem;margin:1.1rem 0;
  box-shadow:var(--schatten);
  background-image:repeating-linear-gradient(transparent,transparent 33px,var(--papierlinie) 33px,var(--papierlinie) 34px);
  background-position:0 2.2rem;
}
.seite::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:8px;border-radius:var(--rund) 0 0 var(--rund);
  background:var(--f,var(--koralle));
}
.seite h2,.seite h3{color:var(--tinte)}
.seite a{color:#1B7FB8}
.seite .leise{color:var(--tinte-leise)}

.leise{color:var(--hell-leise);font-size:.94rem}
.zentriert{text-align:center}

/* Aufkleber, Merkkasten, Zitat */
.aufkleber{
  display:inline-block;background:var(--mango);color:#2A1B00;font-family:var(--display);font-weight:600;
  padding:.15rem .7rem;border-radius:9px;transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(0,0,0,.35);
  font-size:.9rem;margin:0 .3rem .3rem 0;
}
.aufkleber.mint{background:var(--mint);color:#08201A}
.aufkleber.meer{background:var(--meer);color:#04202E}
.aufkleber.koralle{background:var(--koralle);color:#2B0A06}
.aufkleber.flieder{background:var(--flieder);color:#1E0B2C}

.merk{border-left:6px solid var(--mango);background:rgba(255,176,59,.09);
  border-radius:0 12px 12px 0;padding:.9rem 1.1rem;margin:1rem 0}
.merk.wichtig{border-left-color:var(--koralle);background:rgba(255,107,90,.10)}
.merk b{font-family:var(--display);font-weight:600}
.seite .merk{background:rgba(255,176,59,.16)}

/* ----------------------------------------------------------- Knöpfe */

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  appearance:none;border:none;border-radius:12px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  padding:.65rem 1.3rem;background:var(--mint);color:#08201A;
  box-shadow:0 4px 0 rgba(0,0,0,.28);transition:.12s;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.knopf:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.knopf.koralle{background:var(--koralle);color:#2B0A06}
.knopf.mango{background:var(--mango);color:#2A1B00}
.knopf.still{background:transparent;color:var(--hell);border:2px solid var(--kante);box-shadow:none}
.knopf.still:hover{border-color:var(--mint)}
.seite .knopf.still{color:var(--tinte);border-color:#CFC6B4}
.knopf.gross{font-size:1.25rem;padding:.85rem 1.7rem}
.knopf.klein{font-size:.92rem;padding:.35rem .8rem;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.knopf[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1rem}

/* ----------------------------------------------------------- Formulare */

label{display:block;font-weight:700;margin:.9rem 0 .3rem}
label .hinweis{display:block;font-weight:400;font-size:.88rem;color:var(--hell-leise)}
.seite label .hinweis{color:var(--tinte-leise)}

input[type=text],input[type=password],input[type=date],textarea,select{
  width:100%;font:inherit;font-size:1rem;
  padding:.6rem .8rem;border-radius:11px;
  border:2px solid var(--kante);background:#16212C;color:var(--hell);
}
.seite input[type=text],.seite input[type=date],.seite textarea,.seite select{
  background:#fff;color:var(--tinte);border-color:#D8CFBD;
}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(53,214,168,.45);outline-offset:1px;border-color:var(--mint)}
textarea{min-height:5.5rem;resize:vertical;line-height:1.5}
.feldpaar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}

.fehler{background:rgba(255,107,90,.16);border:2px solid var(--koralle);color:var(--hell);
  border-radius:12px;padding:.8rem 1rem;margin:1rem 0}
.gut{background:rgba(53,214,168,.14);border:2px solid var(--mint);border-radius:12px;padding:.8rem 1rem;margin:1rem 0}
.seite .fehler,.seite .gut{color:var(--tinte)}

/* ----------------------------------------------------------- Aufnahme */

.recorder{background:#16212C;border:2px dashed var(--kante);border-radius:var(--rund);padding:1.1rem;text-align:center;color:var(--hell)}
.seite .recorder .leise,.recorder .leise{color:var(--hell-leise)}
.recorder.laeuft{border-style:solid;border-color:var(--koralle);background:rgba(255,107,90,.08)}
.rec-knopf{
  width:84px;height:84px;border-radius:50%;border:4px solid var(--kante);background:var(--koralle);
  cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto .7rem;
  transition:.15s;-webkit-tap-highlight-color:transparent;
}
.rec-knopf::before{content:"";width:30px;height:30px;border-radius:50%;background:#fff;transition:.15s}
.recorder.laeuft .rec-knopf{border-color:var(--koralle);animation:puls 1.4s infinite}
.recorder.laeuft .rec-knopf::before{border-radius:5px;width:26px;height:26px}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(255,107,90,.55)}50%{box-shadow:0 0 0 16px rgba(255,107,90,0)}}
.rec-zeit{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:.04em}
.rec-zeit.warnung{color:var(--koralle)}
.welle{display:flex;align-items:center;justify-content:center;gap:3px;height:42px;margin:.5rem 0}
.welle i{width:4px;border-radius:2px;background:var(--kante);height:6px;transition:height .1s}
.recorder.laeuft .welle i{background:var(--koralle)}

audio{width:100%;margin:.5rem 0}

/* ----------------------------------------------------------- Eintragsliste */

.eintraege{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.eintrag{
  display:block;text-decoration:none;color:var(--tinte);background:var(--papier);
  border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--schatten);
  border-top:7px solid var(--f,var(--koralle));transition:.15s;
}
.eintrag:hover{transform:translateY(-3px)}
.eintrag .ort{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0}
.eintrag .wann{font-size:.85rem;color:var(--tinte-leise)}
.eintrag .zeile{margin:.5rem 0 0;font-size:.94rem;color:var(--tinte)}
.eintrag .fuss{display:flex;gap:.6rem;align-items:center;margin-top:.7rem;font-size:.82rem;color:var(--tinte-leise);flex-wrap:wrap}
.marke{display:inline-block;background:var(--f,var(--koralle));color:#fff;border-radius:7px;
  padding:.05rem .5rem;font-size:.8rem;font-weight:700}
.eintrag.neu{background:transparent;border:2px dashed var(--kante);border-top:2px dashed var(--kante);
  color:var(--hell);display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:150px;text-align:center;font-family:var(--display);font-size:1.1rem;gap:.3rem}
.eintrag.neu span{font-size:2.2rem;line-height:1}
.eintrag.offen{opacity:.85}

/* Ergänzungen anderer Kinder */
.ergaenzung{background:var(--papier2);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0;
  border-left:5px solid var(--meer);color:var(--tinte)}
.ergaenzung .wer{font-weight:700;font-size:.9rem;color:#1B7FB8}
.ergaenzung p{margin:.25rem 0 0;font-size:.95rem}
.ergaenzung .was{font-weight:700;font-size:.82rem;color:var(--tinte-leise);text-transform:uppercase;letter-spacing:.03em}

/* ----------------------------------------------------------- Hörsaal */

.regal{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.buch{
  display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;
  min-height:190px;border-radius:10px;padding:.9rem;color:#fff;position:relative;overflow:hidden;
  background:var(--f,var(--koralle));box-shadow:var(--schatten);transition:.15s;
}
.buch:hover{transform:translateY(-4px) rotate(-1deg)}
.buch::after{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:rgba(0,0,0,.22)}
.buch .bt{font-family:var(--display);font-weight:600;font-size:1.1rem;line-height:1.2}
.buch .bw{font-size:.82rem;opacity:.9}
.buch .bz{position:absolute;top:.6rem;right:.7rem;background:rgba(0,0,0,.28);border-radius:8px;
  padding:.1rem .45rem;font-size:.78rem;font-weight:700}

/* ----------------------------------------------------------- Wortspeicher */

.wortfeld{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1rem}
.wortgruppe{background:var(--pult);border:3px dashed var(--f,var(--kante));border-radius:var(--rund);padding:.9rem}
.wortgruppe.ziel{border-style:solid;background:rgba(53,214,168,.10)}
.wortgruppe h3{margin:0 0 .5rem;font-size:1.05rem;display:flex;align-items:center;gap:.4rem}
.wortgruppe h3 .punkt{width:.85rem;height:.85rem;border-radius:50%;background:var(--f,var(--koralle));flex:none}
.wortgruppe .woerter{display:flex;flex-wrap:wrap;gap:.4rem;min-height:2.6rem}
.wort{
  display:inline-flex;align-items:center;gap:.35rem;background:var(--f,var(--kante));color:#0C1720;
  border-radius:999px;padding:.25rem .75rem;font-weight:700;font-size:.95rem;cursor:grab;
  box-shadow:0 2px 0 rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent;
}
.wort.gewaehlt{outline:3px solid #fff;outline-offset:2px}
.wort:active{cursor:grabbing}
.wort .weg{opacity:.55;font-weight:400}
.wortvorrat{background:#16212C;border:2px solid var(--kante);border-radius:var(--rund);padding:.9rem;margin-top:1rem}

/* ----------------------------------------------------------- Vorschlag */

.gebaeudeliste{display:grid;gap:1rem}
.gebaeudekarte{background:var(--pult);border:2px solid var(--kante);border-left:8px solid var(--f,var(--koralle));
  border-radius:var(--rund);padding:1.1rem 1.2rem}
.gebaeudekarte h3{margin:0 0 .2rem;color:var(--f,var(--koralle))}
.gebaeudekarte .wunsch{font-size:.94rem;color:var(--hell-leise);margin:0 0 .6rem}

/* ----------------------------------------------------------- Kompetenzcheck */

.checkfeld{border:2px solid var(--kante);border-left:8px solid var(--f,var(--mint));
  border-radius:var(--rund);padding:1rem 1.2rem;margin:1rem 0;background:var(--pult)}
.checkfeld h3{color:var(--f,var(--mint));margin-bottom:.6rem}
.checkzeile{border-top:1px solid var(--kante);padding:.8rem 0}
.checkzeile:first-of-type{border-top:none}
.checkzeile p{margin:0 0 .5rem}
.stufen{display:flex;gap:.4rem;flex-wrap:wrap}
.stufe{flex:1 1 0;min-width:88px}
.stufe input{position:absolute;opacity:0;width:0;height:0}
.stufe span{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;cursor:pointer;
  border:2px solid var(--kante);border-radius:11px;padding:.4rem .3rem;text-align:center;
  font-size:.8rem;color:var(--hell-leise);transition:.12s;
}
.stufe span b{font-size:1.25rem;line-height:1;color:var(--hell)}
.stufe input:checked + span{background:var(--mint);border-color:var(--mint);color:#08201A}
.stufe input:checked + span b{color:#08201A}
.stufe input:focus-visible + span{outline:3px solid rgba(53,214,168,.5)}
.checkzeile.spaeter{opacity:.5}
.checkzeile.spaeter .stufen{pointer-events:none}

/* ----------------------------------------------------------- Rückmeldung */

.rueck{background:var(--papier);color:var(--tinte);border-radius:var(--rund);padding:1.2rem 1.4rem;box-shadow:var(--schatten)}
.rueck .kriterium{border-top:1px solid var(--papierlinie);padding:.7rem 0}
.rueck .kriterium:first-of-type{border-top:none}
.rueck .kriterium b{font-family:var(--display);font-weight:600}
.balken{display:flex;gap:4px;margin-top:.3rem}
.balken i{width:34px;height:10px;border-radius:5px;background:#DCD4C4}
.balken i.an{background:var(--mint)}

/* ----------------------------------------------------------- Tabellen (Admin) */

table.liste{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
table.liste th,table.liste td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--kante);vertical-align:top}
table.liste th{font-family:var(--display);font-weight:600;color:var(--hell-leise);font-size:.9rem}
table.liste tr:hover td{background:rgba(255,255,255,.03)}
.zahl{font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------- Fuß */

.fuss{max-width:62rem;margin:3rem auto 0;padding:1.1rem 1rem 0;border-top:1px solid var(--kante);
  font-size:.86rem;color:var(--hell-leise);text-align:center}
.fuss a{color:var(--hell-leise);text-decoration:underline}

@media (max-width:34rem){
  body{font-size:16px}
  .karte,.seite{padding:1.1rem}
  .kopf .kopf-rechts{margin-left:0;text-align:left;width:100%}
  .pegel{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}