/* Profilseite: Holzschilder, Metall und Ketten passend zur bestehenden Navbar. */
.profil-informationen { min-width: 0; display: grid; gap: 14px; align-self: start; }
.profil-info-block {
  padding: 15px 18px;
  border: 2px solid #a37347;
  border-radius: 4px;
  background: linear-gradient(135deg, #443b32, #292723);
  box-shadow: inset 0 0 0 3px #251a12, 0 3px 0 #21120b;
  overflow-wrap: anywhere;
}
.profil-info-block h2 { margin: 0 0 10px; color: #ffe1a1; font-size: 1rem; }
.profil-info-block p { margin: 6px 0; }
.profil-about { white-space: pre-wrap; }
.profil-info-hint { color: #d3c4ae; font-size: .8rem; }
.profil-private dl { margin: 12px 0 0; }
.profil-private dt { color: #d3c4ae; margin-top: 10px; }
.profil-private dd { margin: 3px 0 0; }
.profil-einstellungen { margin-top: 28px; }
.profil-einstellungen label { display: block; margin-bottom: 8px; }
.profil-einstellungen textarea {
  width: 100%; max-width: 100%; min-height: 120px; resize: vertical;
  padding: 10px; border: 1px solid #a37347; border-radius: 3px;
  background: #231f1b; color: #fff8ed; font: inherit;
}
.profil-einstellungen button {
  padding: 9px 20px; margin-top: 10px; border: 2px solid #a37347;
  border-radius: 4px; background: linear-gradient(#665449, #352b24);
  color: #fff8ed; cursor: pointer; font: inherit;
}
.profil-einstellungen :is(button, textarea):focus-visible { outline: 2px solid #ffe1a1; outline-offset: 3px; }
.profil-elternschutz { margin-top: 18px; }
.profil-elternschutz-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.profil-elternschutz button {
  max-width: 100%; padding: 9px 14px; border: 2px solid #a37347;
  border-radius: 4px; background: linear-gradient(#665449, #352b24);
  color: #fff8ed; cursor: pointer; font: inherit;
}
.profil-elternschutz button:focus-visible { outline: 2px solid #ffe1a1; outline-offset: 3px; }
.parent-register-form { display: grid; gap: 8px; max-width: 460px; margin-top: 18px; }
.parent-register-form[hidden] { display: none; }
.parent-register-form label { margin-top: 5px; }
.parent-register-form :is(input, select) { width: 100%; padding: 9px 10px; border: 1px solid #a37347; border-radius: 3px; background: #231f1b; color: #fff8ed; font: inherit; }
.parent-register-form :is(input, select, button):focus-visible { outline: 2px solid #ffe1a1; outline-offset: 3px; }
.profilseite:has(.profil-bereich) .profil-inhalt {
  width: min(900px, calc(100% - 250px));
  margin-left: max(16px, calc((100% - 1140px) / 2));
  margin-right: 234px;
}
@media (max-width: 1000px) {
  .profilseite:has(.profil-bereich) { grid-template-rows: auto 1fr auto; }
  .profilseite .profil-bereich {
    position: relative;
    top: auto;
    right: auto;
    order: 0;
    margin: 140px 16px 26px;
    justify-self: end;
  }
  .profilseite:has(.profil-bereich) .profil-inhalt {
    width: calc(100% - 18px);
    margin: 0 auto;
    padding-top: 0;
    --profil-abstand-oben: 0px;
  }
}
.profilseite .profil-inhalt {
  --profil-abstand-oben: 190px;
  padding-top: var(--profil-abstand-oben);
}

/* Zwei Ketten führen vom oberen Bildschirmrand hinter das Profilfenster. */
.profilseite .profil-inhalt::before,
.profilseite .profil-inhalt::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  height: calc(var(--profil-abstand-oben) + 25px);
  width: 16px;
  background: url("../images/chain.png?v=20260924-light-steel") center top / 114px 326px repeat-y;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
  pointer-events: none;
}
.profilseite .profil-inhalt::before { left: 14%; }
.profilseite .profil-inhalt::after { right: 9%; }
.parent-login-page .profil-inhalt::before,
.parent-login-page .profil-inhalt::after {
  top: -50px;
  height: calc(var(--profil-abstand-oben) + 75px);
}
.parent-login-page .profil-inhalt::after { right: 10%; }
.parent-portal .profil-inhalt::before,
.parent-portal .profil-inhalt::after {
  top: -155px;
  height: calc(var(--profil-abstand-oben) + 180px);
}
.parent-portal .profil-fenster { transform: translateX(clamp(6px, 1vw, 12px)); }

.profilseite .profil-fenster {
  position: relative;
  z-index: 1;
  padding: 15px;
  border: 7px solid #1e1009;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #ad7442, #57341e 6%, #57341e 94%, #ad7442) top / 100% 13px no-repeat,
    linear-gradient(90deg, #422516, #96592f 10%, #96592f 90%, #422516) bottom / 100% 13px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 56px, rgba(27, 14, 8, .44) 56px 59px, rgba(195, 129, 72, .22) 59px 61px),
    repeating-linear-gradient(90deg, #784626 0 92px, #60371f 92px 184px);
  box-shadow:
    inset 0 0 0 2px #c1894e,
    inset 0 0 0 6px #352012,
    inset 0 -8px rgba(28, 13, 7, .35),
    0 6px 0 rgba(21, 10, 5, .65),
    0 17px 28px rgba(0, 0, 0, .5);
}

/* Der Profilkopf benutzt exakt dieselben skalierbaren Schildränder wie die
   aktuellen Schilder der Hauptseite. Dadurch sitzen beide Metallenden sauber
   im Holzrahmen, statt nur als abgeschnittene Eckgrafiken darüberzuliegen. */
.profilseite .profil-fenster::before,
.profilseite .profil-fenster::after {
  display: none;
}

.profilseite .fenster-kopf {
  position: relative;
  z-index: 4;
  display: block;
  box-sizing: border-box;
  min-height: 0;
  margin: -7px -7px 12px;
  padding: 0;
  color: #fff8ed;
  border: solid transparent;
  border-width: 26px 34px 15px 0;
  border-image-source: url("../images/ui/navbar.png");
  border-image-slice: 34 45 18 100 fill;
  border-image-width: 26px 34px 15px 0;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 4px 1px #130a06) drop-shadow(0 8px 10px rgba(0, 0, 0, .32));
  font-size: 1.05rem;
  letter-spacing: .13em;
  text-align: center;
  text-shadow: 0 2px 2px #15100e, 1px 1px 0 #15100e;
}

/* Rechtes Original-Endstück gespiegelt als linker Rand – identisch zu den
   Status- und Login-Schildern der Hauptseite. */
.profilseite .fenster-kopf::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -26px;
  bottom: -15px;
  left: 0;
  box-sizing: border-box;
  width: 34px;
  border: solid transparent;
  border-width: 26px 34px 15px 0;
  border-image-source: url("../images/ui/navbar.png");
  border-image-slice: 34 45 18 100 fill;
  border-image-width: 26px 34px 15px 0;
  border-image-repeat: stretch;
  pointer-events: none;
  transform: scaleX(-1);
}

/* Nur die alte Beschriftung der Navbar-Grafik abdecken. Die Holzleiste oben
   sowie die echten Metallränder bleiben vollständig sichtbar. */
.profilseite .fenster-kopf::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10px 0 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #665449, #635147 34%, #493e38 52%, #453a34);
}

.profilseite .fenster-kopf > span {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 39px;
  margin-left: 34px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px 6px;
  border: 1px solid rgba(180, 132, 83, .56);
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 45%, rgba(16,10,7,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 -1px rgba(23,14,9,.65);
}

.profilseite .profil-grunddaten {
  margin-top: 12px;
  padding: 30px 27px;
  border: 4px solid #21140d;
  border-radius: 5px;
  background:
    linear-gradient(140deg, #48443d, #30312e 58%, #242523) center / calc(100% - 17px) calc(100% - 17px) no-repeat,
    repeating-linear-gradient(90deg, #704328 0 76px, #57331f 76px 152px);
  box-shadow:
    inset 0 0 0 2px #b37b46,
    inset 0 0 0 8px #281a11,
    inset 0 13px 21px rgba(16, 12, 9, .38);
}

.profilseite .profil-layout {
  gap: clamp(20px, 4vw, 42px);
  grid-template-columns: 215px minmax(0, 1fr);
}

.profilseite .profil-identitaet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 66px;
  padding: 11px 38px;
  text-align: center;
}
.profilseite .profil-name { overflow-wrap: anywhere; min-width: 0; }
.profilseite .profil-emblem { display: inline-flex; align-items: center; max-width: 100%; }
.profilseite .profil-emblem img { display: block; width: 150px; max-width: 100%; height: auto; }
.profilseite .profil-emblem-text {
  min-height: 40px;
  padding: 6px 18px;
  border: 2px solid #d4ab52;
  border-radius: 4px 12px;
  background: linear-gradient(135deg, #46391b, #171e28);
  color: #ffe29a;
  font-weight: 900;
  letter-spacing: .08em;
  overflow-wrap: anywhere;
}
.profilseite .profil-layout > .profil-skin-rahmen { width: min(215px, 100%); }

.profilseite .profil-skin-rahmen {
  border: 7px solid #26160d;
  border-radius: 5px;
  background:
    radial-gradient(circle at 9px 9px, #d2a46e 0 2px, #332016 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 9px) 9px, #d2a46e 0 2px, #332016 3px 5px, transparent 6px),
    radial-gradient(circle at 9px calc(100% - 9px), #d2a46e 0 2px, #332016 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #d2a46e 0 2px, #332016 3px 5px, transparent 6px),
    repeating-linear-gradient(90deg, #80502e 0 48px, #603921 48px 96px);
  box-shadow:
    inset 0 0 0 2px #bb824b,
    inset 0 0 0 6px #372113,
    5px 7px 0 rgba(14, 9, 6, .5);
}
.profilseite .profil-skin-rahmen::before {
  inset: 12px;
  border: 2px solid #8d7b69;
  background: linear-gradient(140deg, #463b32, #261e19);
  box-shadow: inset 0 0 0 3px #241b15, inset 0 0 30px rgba(0, 0, 0, .46);
}

/* Name und Ränge liegen auf einzelnen Holzschildern mit echten Metallenden. */
.profilseite .profil-identitaet,
.profilseite .profil-daten > strong,
.profilseite .profil-rang-zeile {
  position: relative;
  overflow: hidden;
  border: 2px solid #21120b;
  border-radius: 3px;
  background:
    linear-gradient(#716258, #50463f 55%, #3c342f) center / calc(100% - 54px) calc(100% - 22px) no-repeat,
    linear-gradient(#b4a08d, #665e56) center / calc(100% - 49px) calc(100% - 17px) no-repeat,
    linear-gradient(#251b15, #211610) center / calc(100% - 43px) calc(100% - 11px) no-repeat,
    url("../images/ui/navbar.png") center -20px / 100% 83px no-repeat,
    #56321c;
  box-shadow: inset 0 0 0 1px #a37347, inset 0 -3px #2c1b10;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, calc(100% - 4px) 9px, calc(100% - 4px) calc(100% - 9px), calc(100% - 16px) 100%, 16px 100%, 4px calc(100% - 9px), 4px 9px);
}
.profilseite .profil-identitaet::before,
.profilseite .profil-identitaet::after,
.profilseite .profil-daten > strong::before,
.profilseite .profil-daten > strong::after,
.profilseite .profil-rang-zeile::before,
.profilseite .profil-rang-zeile::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7px;
  bottom: 0;
  width: 35px;
  background: url("../images/ui/navbar.png") right -27px / auto 83px no-repeat;
  pointer-events: none;
}
.profilseite .profil-identitaet::before,
.profilseite .profil-daten > strong::before,
.profilseite .profil-rang-zeile::before { left: 0; transform: scaleX(-1); }
.profilseite .profil-identitaet::after,
.profilseite .profil-daten > strong::after,
.profilseite .profil-rang-zeile::after { right: 0; }

.profilseite .profil-daten > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(470px, 100%);
  min-height: 66px;
  margin: 0 auto;
  padding: 11px 38px;
  color: #fff8ed;
  font-size: 1.35rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow: 0 2px 2px #15100e, 1px 1px 0 #15100e;
}
.profilseite .profil-raenge {
  gap: 11px;
  margin-top: 15px;
}
.profilseite .profil-rang-zeile {
  grid-template-columns: minmax(105px, 135px) minmax(0, 1fr);
  min-height: 56px;
  padding: 10px 38px;
  gap: 12px;
}
.profilseite .profil-rang-label { color: #eee0d1; }
.profilseite .profil-rang-wert {
  color: #ffe1a1;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .profilseite .profil-inhalt {
    --profil-abstand-oben: 136px;
    padding: var(--profil-abstand-oben) 0 55px;
  }
  .profilseite .profil-fenster { padding: 10px; border-width: 5px; }
  .profilseite .fenster-kopf {
    margin: -5px -5px 12px;
    border-width: 22px 29px 13px 0;
    border-image-width: 22px 29px 13px 0;
    font-size: .95rem;
  }
  .profilseite .fenster-kopf::after {
    top: -22px;
    bottom: -13px;
    width: 29px;
    border-width: 22px 29px 13px 0;
    border-image-width: 22px 29px 13px 0;
  }
  .profilseite .fenster-kopf::before { inset: 8px 0 0; }
  .profilseite .fenster-kopf > span {
    min-height: 35px;
    margin-left: 29px;
    padding: 4px 10px 5px;
  }
  .profilseite .profil-grunddaten { padding: 22px 13px; }
  .profilseite .profil-layout { grid-template-columns: 1fr; gap: 20px; }
  .profilseite .profil-daten { justify-self: center; }
  .profilseite .profil-skin-rahmen { width: min(190px, 58vw); margin: 0 auto; }
  .profilseite .profil-daten > strong { min-height: 60px; font-size: 1.12rem; }
  .profilseite .profil-rang-zeile {
    grid-template-columns: 1fr;
    min-height: 65px;
    gap: 4px;
    padding: 10px 36px;
  }
}
.elternschutz-aktiv { color: #d8f0b2; font-weight: 700; }
.parent-login-page .profil-inhalt {
  width: min(560px, calc(100% - 32px));
  margin: 150px auto 36px;
}
.parent-login-page .profil-fenster { transform: translateX(clamp(6px, 1vw, 12px)); }
.parent-portal .profil-inhalt { width: min(760px, calc(100% - 32px)); margin: 150px auto 36px; }
.parent-portal .profil-fenster { transform: translateX(clamp(6px, 1vw, 12px)); }
.parent-portal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.parent-portal-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.parent-portal-tabs [role="tab"] {
  min-height: 38px; padding: 7px 14px; border: 2px solid #a37347; border-radius: 4px;
  background: linear-gradient(#665449, #352b24); color: #fff8ed; cursor: pointer; font: inherit;
}
.parent-portal-tabs [role="tab"][aria-selected="true"] { background: linear-gradient(#94704c, #59402b); box-shadow: inset 0 0 0 1px #d0a36b; }
.parent-portal-tabs [role="tab"]:focus-visible,
.parent-child-manage:focus-visible { outline: 2px solid #ffe1a1; outline-offset: 3px; }
.parent-portal-panel[hidden] { display: none; }
.parent-portal-children { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 8px; }
.parent-child-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px;
  border: 2px solid #a37347; border-radius: 4px; background: linear-gradient(135deg, #443b32, #292723); text-align: center;
}
.parent-child-head { width: 48px; height: 48px; image-rendering: pixelated; }
.parent-child-card h3 { margin: 2px 0; color: #ffe1a1; font-size: .95rem; }
.parent-child-card p { margin: 0; color: #eee2d0; font-size: .82rem; }
.parent-child-manage { margin-top: 3px; padding: 4px 9px; border: 1px solid #a37347; border-radius: 3px; background: linear-gradient(#665449, #352b24); color: #fff8ed; font: inherit; font-size: .8rem; }
.parent-child-manage:disabled { cursor: not-allowed; opacity: .7; }
.parent-portal-logout { margin: 0; }
.parent-portal-logout button { padding: 9px 18px; border: 2px solid #a37347; border-radius: 4px; background: linear-gradient(#665449, #352b24); color: #fff8ed; font: inherit; cursor: pointer; }
.parent-portal-logout button:focus-visible { outline: 2px solid #ffe1a1; outline-offset: 3px; }