/* V87: Freigegebene Hydroxypathie-Gestaltung V59/V60. Auf diese Fachseite begrenzt. */
.hydro-v87 * {box-sizing:border-box}
.hydro-v87 .layout {max-width:1600px;margin:auto;display:grid;grid-template-columns:112px minmax(0,1fr);min-height:100vh}
.hydro-v87 .side {background:#eaf2f6;position:relative;align-self:stretch}
.hydro-v87 .side span {position:sticky;top:90px;display:block;margin:65px auto 0;writing-mode:vertical-rl;transform:rotate(180deg);font:400 25px/1.1 Georgia,serif;letter-spacing:.21em;color:#334b43;width:max-content}
.hydro-v87 .maincol {min-width:0}
.hydro-v87 .intro {padding:75px clamp(55px,6vw,110px) 75px clamp(55px,6vw,100px);display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,35%);column-gap:40px;align-items:start}
.hydro-v87 .eyebrow {font:11px Arial,sans-serif;letter-spacing:.19em;text-transform:uppercase;color:#7a796e;margin:0 0 27px}
.hydro-v87 .intro h1 {font:400 clamp(64px,6vw,100px)/1.07 Georgia,serif;letter-spacing:-.045em;color:#103f3d;margin:0 0 42px}
.hydro-v87 .illustration {padding-top:45px}
.hydro-v87 .illustration img {width:100%;max-width:490px;display:block;mix-blend-mode:multiply}
.hydro-v87 .article-intro p {font:400 16px/1.88 Arial,Helvetica,sans-serif;color:#4c5550;margin:0 0 23px;max-width:685px}
.hydro-v87 .article-intro p:first-child {font:400 23px/1.65 Georgia,serif;color:#203e39}
.hydro-v87 .articlewrap {padding:0 clamp(55px,6vw,110px) 100px clamp(55px,6vw,100px)}
.hydro-v87 article {max-width:815px}
.hydro-v87 article p {font:400 16px/1.9 Arial,Helvetica,sans-serif;color:#4c5550;margin:0 0 22px}
.hydro-v87 article .article-section {margin:0 0 100px}
.hydro-v87 article h2 {font:400 clamp(38px,3.3vw,53px)/1.2 Georgia,serif;color:#103f3d;letter-spacing:-.018em;margin:0 0 35px}
.hydro-v87 article h3 {font:400 31px/1.2 Georgia,serif;color:#103f3d;margin:56px 0 22px}
.hydro-v87 article .article-personal-note {background:none;border:0;padding:0;margin:52px 0}
.hydro-v87 article ul {padding-left:20px}
.hydro-v87 article li {line-height:1.85;margin-bottom:10px}
.hydro-v87 .closing {margin:0 clamp(55px,6vw,110px) 95px clamp(55px,6vw,100px);padding:45px 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:35px;max-width:815px}
.hydro-v87 .closing p {font:normal 27px Georgia,serif;margin:0;color:#103f3d}
.hydro-v87 .closing a {color:#103f3d;font:13px Arial;text-decoration:underline;text-underline-offset:6px}
@media (max-width:900px) {.hydro-v87 .layout {grid-template-columns:54px minmax(0,1fr)}
.hydro-v87 .side span {font-size:17px;letter-spacing:.12em}
.hydro-v87 .intro {padding:60px 36px;grid-template-columns:1fr}
.hydro-v87 .illustration {padding:12px 0 0;max-width:330px}
.hydro-v87 .articlewrap {padding:0 36px 65px}
.hydro-v87 .closing {margin:0 36px 60px;display:block}
.hydro-v87 .closing a {display:inline-block;margin-top:20px}}
@media (max-width:560px) {.hydro-v87 .layout {grid-template-columns:27px minmax(0,1fr)}
.hydro-v87 .side span {font-size:11px;letter-spacing:.12em;margin-top:43px}
.hydro-v87 .intro {padding:38px 20px 50px;display:flex;flex-direction:column}
.hydro-v87 .intro h1 {font-size:49px;margin-bottom:27px}
.hydro-v87 .eyebrow {font-size:9px;margin-bottom:19px}
.hydro-v87 .article-intro p {font-size:14px;line-height:1.85}
.hydro-v87 .article-intro p:first-child {font-size:19px}
.hydro-v87 .illustration {order:-1;padding:0;align-self:flex-end;max-width:185px;height:130px;overflow:hidden;margin-bottom:0}
.hydro-v87 .illustration img {width:200px;margin-left:auto}
.hydro-v87 .articlewrap {padding:0 20px 35px}
.hydro-v87 article h2 {font-size:34px}
.hydro-v87 article h3 {font-size:27px}
.hydro-v87 article p {font-size:14px;line-height:1.85}
.hydro-v87 article .article-section {margin-bottom:70px}
.hydro-v87 .closing {margin:0 20px 60px}
.hydro-v87 .closing p {font-size:23px}}
@media (max-width:560px) {.hydro-v87 .layout {display:block; min-height:0;}
.hydro-v87 .side {height:38px; width:100%; background:#eaf2f6; display:flex; align-items:center; padding:0 24px;}
.hydro-v87 .side span {position:static; transform:none; writing-mode:horizontal-tb; width:auto; margin:0; font:400 10px/1.2 Arial,Helvetica,sans-serif; letter-spacing:.22em; color:#103f3d;}
.hydro-v87 .intro {padding:42px 26px 49px; gap:0;}
.hydro-v87 .intro h1 {font-size:clamp(43px,12vw,51px); margin-bottom:32px;}
.hydro-v87 .eyebrow {margin-bottom:20px;}
.hydro-v87 .article-intro p:first-child {font-size:20px;line-height:1.62;}
.hydro-v87 .article-intro p {font-size:15px;line-height:1.82;}
.hydro-v87 .illustration {order:initial; align-self:flex-end; width:55%; max-width:170px; height:auto; overflow:visible; padding-top:11px; margin:8px 5px 0 0; opacity:.82;}
.hydro-v87 .illustration img {width:100%; margin:0; max-width:100%;}
.hydro-v87 .articlewrap {padding:0 26px 46px;}
.hydro-v87 article p {font-size:15px;line-height:1.82;}
.hydro-v87 .closing {margin:0 26px 65px;}}
@media (max-width:560px) {.hydro-v87 .intro { padding-bottom: 32px; }
.hydro-v87 .article-intro p { margin-bottom: 14px; line-height: 1.68; }
.hydro-v87 .article-intro p:last-child { margin-bottom: 0; }
.hydro-v87 .illustration { margin-top: 18px; padding-top: 0; }
.hydro-v87 article p { margin-bottom: 14px; line-height: 1.72; }
.hydro-v87 article p:last-child { margin-bottom: 0; }
.hydro-v87 article h2 { margin-bottom: 19px; line-height: 1.2; }
.hydro-v87 article h3 { margin: 33px 0 14px; line-height: 1.22; }
.hydro-v87 article .article-section { margin-bottom: 45px; }
.hydro-v87 article .article-subsection { margin-top: 25px; }
.hydro-v87 article .article-subsection h3 { margin-top: 0; }
.hydro-v87 article .article-personal-note { margin: 28px 0; }
.hydro-v87 .articlewrap { padding-bottom: 26px; }}
.hydro-v87 .skip:focus {left:10px;top:10px;z-index:30;background:white;padding:12px}
.hydro-v87 .intro {grid-template-columns:minmax(0,1fr) minmax(230px,30%);column-gap:clamp(20px,3vw,55px)}
.hydro-v87 .intro h1 {font-size:clamp(59px,5.7vw,91px)}
.hydro-v87 .illustration {padding-top:60px;opacity:.78}
.hydro-v87 .illustration svg {display:block;width:100%;max-width:360px;height:auto}
.hydro-v87 .closing span {color:#103f3d;font:13px Arial;text-decoration:underline;text-underline-offset:6px;opacity:.75}
@media (max-width:900px) {.hydro-v87 .illustration {padding:10px 0 0;max-width:240px;align-self:flex-end}
.hydro-v87 .intro {grid-template-columns:1fr}}
@media (max-width:560px) {.hydro-v87 .intro h1 {font-size:clamp(42px,11vw,51px)}
.hydro-v87 .illustration {order:initial;width:43%;max-width:130px;margin:0 0 0 auto;padding:0;opacity:.65}
.hydro-v87 .illustration svg {width:100%}
.hydro-v87 .closing span {display:inline-block;margin-top:20px}}
@media (max-width:560px) {.hydro-v87 .illustration { display:none; }
.hydro-v87 .intro { padding-bottom:31px; }}
.hydro-v87 .intro {grid-template-columns:minmax(0,1fr) minmax(260px,34%);column-gap:clamp(14px,2.5vw,38px)}
.hydro-v87 .illustration {padding-top:45px;opacity:1;min-width:0;overflow:visible;}
.hydro-v87 .illustration img {display:block;width:125%;max-width:none;height:auto;margin-left:-12%;mix-blend-mode:normal;}
@media (max-width:900px) {.hydro-v87 .intro {grid-template-columns:1fr;}
.hydro-v87 .illustration {width:min(72%,410px);max-width:none;padding:0;margin:8px auto 0;align-self:center;}
.hydro-v87 .illustration img {width:100%;margin-left:0;}}
@media (max-width:560px) {.hydro-v87 .illustration {display:block;width:min(82%,310px);max-width:none;align-self:center;margin:17px auto 0;padding:0;opacity:1;height:auto;}
.hydro-v87 .illustration img {width:100%;max-width:none;height:auto;display:block;margin:0;}
.hydro-v87 .intro {padding-bottom:30px;}}
.hydro-v87{background:#faf8f3;color:#243e3a;min-width:0}
.hydro-v87 .layout{min-height:0}
.hydro-v87 .intro,.hydro-v87 .articlewrap{min-width:0}
.hydro-v87 .closing a{display:inline-block}
@media(max-width:560px){.hydro-v87 .intro,.hydro-v87 .articlewrap{min-width:0}.hydro-v87 .intro h1{overflow-wrap:anywhere}}
/* Freigegebene Fachstudie: keine aus dem globalen Artikelstil geerbten Trennlinien. */
.hydro-v87 article .article-section{border:0;padding:0;scroll-margin-top:100px}
/* V88 – ruhiger, einheitlicher Abschnittsrhythmus ohne Ersatzluecke fuer Trennlinien. */
@media (min-width:901px) {
  .hydro-v87 .intro {padding-bottom:36px}
  .hydro-v87 article .article-section {margin-bottom:65px}
}
@media (min-width:561px) and (max-width:900px) {
  .hydro-v87 .intro {padding-bottom:36px}
  .hydro-v87 article .article-section {margin-bottom:58px}
}
@media (max-width:560px) {
  .hydro-v87 .intro {padding-bottom:20px}
  .hydro-v87 article .article-section {margin-bottom:35px}
}
/* Der globale .article-intro-Stil brachte die unerwuenschte Linie und 60px Zusatzabstand. */
.hydro-v87 .article-intro {border:0;padding:0;margin:0}
.hydro-v87 .article-intro p:last-child {margin-bottom:0}

/* V89: konsistenter vertikaler Rhythmus: Uebergang Einleitung/Abschnitt und zwischen Abschnitten. */
@media (min-width:901px) {
 .hydro-v87 .intro {padding-bottom:48px;}
 .hydro-v87 article .article-section {margin-bottom:48px;}
 .hydro-v87 article h2 {margin-bottom:26px;}
 .hydro-v87 article p {margin-bottom:20px;}
}
@media (min-width:561px) and (max-width:900px) {
 .hydro-v87 .intro {padding-bottom:40px;}
 .hydro-v87 article .article-section {margin-bottom:40px;}
 .hydro-v87 article h2 {margin-bottom:23px;}
 .hydro-v87 article p {margin-bottom:18px;}
}
@media (max-width:560px) {
 .hydro-v87 .intro {padding-bottom:32px;}
 .hydro-v87 article .article-section {margin-bottom:32px;}
 .hydro-v87 article h2 {margin-bottom:19px;}
 .hydro-v87 article p {margin-bottom:14px;}
}
.hydro-v87 article .article-section > :last-child {margin-bottom:0;}

/* V91: Bildintegration - ohne Eingriffe in den freigegebenen Absatzrhythmus.
   Grosszuegigerer Bildaufbau, rundum sanfter Auslauf, keine sichtbare Bildkante. */
@media (min-width:901px) {
  .hydro-v87 .intro {grid-template-columns:minmax(0,1fr) minmax(255px,36%); column-gap:clamp(10px,1.3vw,24px);}
  .hydro-v87 .illustration {padding-top:18px; margin-right:0; margin-left:-30px; position:relative; isolation:isolate;}
  .hydro-v87 .illustration img {width:105%; max-width:none; margin:0; height:auto;
    -webkit-mask-image:radial-gradient(ellipse 62% 57% at 51% 48%,#000 51%,rgba(0,0,0,.92) 65%,transparent 100%);
    mask-image:radial-gradient(ellipse 62% 57% at 51% 48%,#000 51%,rgba(0,0,0,.92) 65%,transparent 100%);}
}
@media (min-width:561px) and (max-width:900px) {
  .hydro-v87 .illustration {width:min(81%,470px);max-width:none; margin:0 auto;}
  .hydro-v87 .illustration img {-webkit-mask-image:radial-gradient(ellipse 64% 57% at 50% 48%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 64% 57% at 50% 48%,#000 50%,transparent 100%);}
}
@media (max-width:560px) {
  .hydro-v87 .illustration {width:min(90%,340px); max-width:none; margin:12px auto -4px;}
  .hydro-v87 .illustration img {-webkit-mask-image:radial-gradient(ellipse 63% 57% at 50% 49%,#000 49%,transparent 100%);mask-image:radial-gradient(ellipse 63% 57% at 50% 49%,#000 49%,transparent 100%);}
}