/* Die Grundfarben stammen von der bestehenden Vereinsseite -- dort gemessen, nicht geschaetzt: Ueberschriften rgb(111,84,65), Flaeche rgb(248,244,241), Zweitton rgb(157,137,124). `--gruen` heisst weiterhin so, traegt aber jetzt das Braun: Der Name steht ueberall im Stil, und ihn umzubenennen haette nichts verbessert. */ :root{ --papier:#F8F4F1; --karte:#FFFFFF; --flaeche2:#EFE8E2; --tinte:#411E06; --tinte2:#7D6D63; --linie:#E2D8D0; /* --tinte2 ist der Zweitton der alten Seite (#9D897C), etwas abgedunkelt: Im Original ergibt er auf dem Beige nur 3.0:1 und ist damit fuer kleinen Text zu schwach. #7D6D63 ist derselbe Farbton bei 4.5:1 -- die Anmutung bleibt, die Lesbarkeit stimmt. Bei einem Verein, dessen Auflage-Disziplinen ab 65 beginnen, ist das keine Formalie. */ --gruen:#6F5441; --rot:#A8332A; --gold:#B08430; --auf-farbe:#FBF8F5; --r:10px; } /* Bewusst nur eine Fassung: Die Vereinsfarben sind die Marke, und ein Dunkelmodus faerbt sie um. `color-scheme: light` gehoert dazu -- ohne das faerbt der Browser auf einem dunkel gestellten Geraet weiterhin Formularfelder, Rollbalken und Auswahllisten dunkel ein, und dann stehen dunkle Eingabefelder auf hellem Grund. */ :root{ color-scheme: light } *{box-sizing:border-box} /* 18 px statt 16,5: Bei einem Verein, dessen Auflage-Disziplinen ab 65 Jahren beginnen, ist eine gut lesbare Grundschrift keine Kosmetik. Die Zeilenhoehe waechst mit -- groessere Schrift in engen Zeilen wirkt gedraengt statt lesbarer. */ body{margin:0;background:var(--papier);color:var(--tinte); font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;font-size:18px; line-height:1.6} h1,h2,h3{font-family:Bitter,Georgia,serif;text-wrap:balance;letter-spacing:-.005em} h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.06;margin:0 0 26px;font-weight:800} h2{font-size:clamp(1.25rem,3.2vw,1.65rem);line-height:1.16;margin:0 0 18px;font-weight:700} h3{font-size:1.05rem;margin:0 0 6px;font-weight:700} /* 92 Zeichen statt 68: "Ganze Breite" soll spuerbar breit sein, sonst verspricht die Einstellung etwas, das nicht eintritt. Ganz ohne Grenze waeren es auf einem breiten Schirm ueber 140 Zeichen je Zeile -- dann findet das Auge beim Umbruch den naechsten Zeilenanfang nicht mehr, und man liest dieselbe Zeile zweimal. */ p{margin:0 0 16px;max-width:92ch} a{color:var(--gruen)} ul,ol{margin:0 0 14px;padding-left:20px;max-width:66ch} li{margin-bottom:5px} code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.87em; background:var(--flaeche2);padding:1px 5px;border-radius:4px} .neben{font-size:.85rem;color:var(--tinte2)} /* Das Layout nutzt die Breite -- Banner, Kacheln, Tabellen und der Kalender laufen bis an den Rand. Der Fliesstext tut das bewusst nicht (siehe `p`): Eine Zeile ueber die volle Breite eines grossen Schirms liest niemand zu Ende. */ .huelle{width:100%;padding:0 clamp(16px,3vw,48px)} /* Wo laengerer Text steht, wird die Spalte eingezogen -- nicht die ganze Seite. */ .lesespalte{max-width:74ch} /* ── Die naechste Seite schiebt sich seitlich herein ── Rene: "kommt auch bei den anderen immer gut an." Frueher brauchte es dafuer ein Skript, das die Seite nachlaedt und selbst animiert. Heute macht es der Browser beim ganz normalen Seitenwechsel. Wo er es nicht kann, wechselt die Seite schlicht -- es geht nichts kaputt, es ist nur weniger huebsch. */ @view-transition{ navigation:auto } @keyframes rein-von-rechts{ from{ transform:translateX(26px); opacity:0 } } @keyframes raus-nach-links{ to{ transform:translateX(-16px); opacity:0 } } ::view-transition-old(root){ animation:raus-nach-links .22s ease both } ::view-transition-new(root){ animation:rein-von-rechts .3s ease both } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none } } /* ── Entwurfsband: Die Seite sieht aus wie die echte. Ohne diesen Streifen waere das eine Verwechslung, die man selbst herbeigefuehrt hat. ── */ .entwurfsband{background:var(--rot);color:#fff;font-size:.83rem;padding:7px 0} .entwurfsband .huelle{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline} .entwurfsband b{font-family:Bitter,Georgia,serif;letter-spacing:.1em; text-transform:uppercase;font-size:.72rem} .entwurfsband a{color:#fff} /* ── Neuigkeiten-Band ── */ .ticker{background:var(--gruen);color:var(--auf-farbe);font-size:.89rem;padding:8px 0} .ticker .huelle{display:flex;gap:12px;align-items:baseline} .ticker b{font-family:Bitter,Georgia,serif;font-size:.72rem;letter-spacing:.12em; text-transform:uppercase;flex:0 0 auto;opacity:.85} .ticker .lauf{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ticker a{color:var(--auf-farbe)} /* ── Kopf ── */ header{background:linear-gradient(180deg,var(--flaeche2),var(--papier)); border-bottom:1px solid var(--linie)} /* Die alte Kopfzeile mit kleinem Logo, Vereinsname und Spartenzeile ist entfallen: Der Name stand dreimal untereinander -- gezeichnet im Logo, als Ueberschrift daneben und als Zeile darunter. Das Logo traegt ihn selbst. */ /* Genauso gross wie der Fliesstext, nicht groesser: Ein Menue, das den Text ueberragt, den es erschliesst, dreht die Rangfolge um. */ /* 18px, nicht 1rem: Die Einheit rem bezieht sich auf die Grundgroesse des Browsers (16px), nicht auf die der Seite -- damit waere das Menue kleiner als der Text statt gleich gross. Bei vierzehn Punkten kann es auf schmalen Schirmen zweizeilig werden; der Abstand nach unten ist entsprechend bemessen. */ nav.menue{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:18px;font-weight:600; padding-bottom:16px;line-height:1.35} nav.menue a{text-decoration:none;color:var(--tinte);padding:4px 0; border-bottom:2px solid transparent} nav.menue a:hover{border-bottom-color:var(--linie)} nav.menue a.an{border-bottom-color:var(--rot)} nav.menue .rechts{margin-left:auto;display:flex;gap:16px;font-weight:400; align-items:baseline} /* Die Nebenpunkte bleiben kleiner: Sie sind nachgeordnet, und wenn alles gleich gross ist, ist nichts mehr betont. */ nav.menue .rechts a{color:var(--tinte2);font-size:1rem} main{padding:clamp(26px,5vw,46px) 0 60px} section{margin-bottom:clamp(30px,5vw,50px)} /* ── Bausteine ── */ .gitter{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r); padding:17px 19px} .karte p:last-child{margin-bottom:0} .karte.rand{border-top:3px solid var(--sf,var(--gruen))} a.karte{text-decoration:none;color:inherit;display:block} a.karte:hover{border-color:var(--sf,var(--gruen))} .karte .mehr{font-size:.85rem;font-weight:600;color:var(--sf,var(--gruen))} .hero{display:grid;gap:26px;grid-template-columns:1fr} @media(min-width:780px){ .hero{grid-template-columns:1.3fr .7fr} } @media(min-width:1200px){ .hero{gap:38px} } .platzhalter{border:1px dashed var(--rot);border-radius:var(--r);padding:13px 15px; background:var(--flaeche2);font-size:.88rem;color:var(--tinte2)} .platzhalter b{color:var(--rot);font-family:Bitter,Georgia,serif;font-size:.72rem; letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px} .rahmen{width:100%;border:1px solid var(--linie);border-radius:var(--r);background:var(--karte)} table{border-collapse:collapse;width:100%;font-size:.92rem} .rollt{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r); background:var(--karte)} th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linie); vertical-align:top} th{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte2); font-weight:700;white-space:nowrap} tr:last-child td{border-bottom:0} .knopf{display:inline-block;border:0;border-radius:7px;padding:10px 17px;font-weight:700; font-size:.93rem;background:var(--gruen);color:var(--auf-farbe); font-family:inherit;cursor:pointer;text-decoration:none} .knopf.leise{background:transparent;color:var(--tinte);border:1px solid var(--linie)} .knopf.paypal{background:var(--gold);color:#1B1403} label{display:block;margin-bottom:12px;font-size:.9rem;font-weight:600} input[type=text],input[type=email],input[type=tel],select,textarea{ width:100%;padding:9px 11px;border:1px solid var(--linie);border-radius:7px; background:var(--karte);color:var(--tinte);font:inherit;font-weight:400;margin-top:4px} .zweispalt-form{display:grid;gap:0 16px;grid-template-columns:1fr} @media(min-width:620px){ .zweispalt-form{grid-template-columns:1fr 1fr} } /* ── Das echte Logo im Kopf ── */ /* ── Fahnenband: links und rechts die beiden Seiten der Vereinsfahne, in der Mitte das Logo. Auf schmalen Schirmen umgestellt -- drei Bilder nebeneinander waeren auf 375 px alle drei unkenntlich. */ /* Die Fahnen werden ueber die BREITE bemessen, nicht ueber die Hoehe. Beide bekommen dieselbe feste Breite, damit sind die Aussenteile per Konstruktion gleich und das Logo sitzt in der Mitte -- ohne dass ein Raster etwas ausrechnen muss. Ueber `height` bemessen haengt die Breite dagegen am Bildinhalt, und dann kaempft jedes Raster gegen sie an (gemessen: erst 42 px daneben, dann 160). Beide Bilder haben dasselbe Seitenverhaeltnis (900x1200), also stimmt die Hoehe von selbst. */ .fahnenband{display:flex;align-items:center;justify-content:center; gap:clamp(12px,3vw,46px);padding:clamp(10px,1.6vw,20px) 0} .fahne{width:clamp(78px,11vw,158px);height:auto;flex:0 0 auto;border-radius:6px; box-shadow:0 5px 18px rgba(55,44,36,.16)} .grosslogo{width:100%;max-width:440px;height:auto;display:block} .fahnenmitte{text-align:center;text-decoration:none;color:inherit;display:block; flex:0 1 auto;min-width:0} @media(max-width:640px){ /* Auf schmalen Schirmen waeren drei Bilder nebeneinander alle drei unkenntlich: Logo nach oben, die beiden Fahnenseiten darunter nebeneinander -- so bleibt der Vergleich Vorder- zu Rueckseite erhalten, um den es geht. */ .fahnenband{flex-wrap:wrap} .fahnenmitte{order:-1;flex:1 0 100%} .fahne{width:min(42%,190px)} } } .bild{display:block;width:100%;height:auto;border-radius:var(--r); border:1px solid var(--linie)} /* ── Vorstandskacheln zum Umdrehen ── Bei Wix ein kostenpflichtiges Add-on, hier zwanzig Zeilen CSS. Umgedreht wird per Klick (Klasse `um`), nicht beim Darueberfahren: Auf dem Handy gibt es kein Darueberfahren, und eine Kachel, die sich nur am Schreibtisch oeffnen laesst, ist keine. */ /* Feste Stufen statt auto-fit: Bei acht Personen wuerde auto-fit je nach Fensterbreite eine Reihe mit fuenf und eine mit drei ergeben. Eine auf dem Handy, zwei auf dem grossen Handy, drei auf dem Tablet, vier am Schreibtisch. Auf dem Handy stand hier lange ein Paar nebeneinander. Das ging, solange alle Beschreibungen kurz waren -- seit die Kachel mit ihrem Text waechst, zieht eine lange Vorstellung die Nachbarkachel mit: gemessen 537 px Hoehe bei 164 px Breite, und aus einem Portraitfoto wird ein Streifen, auf dem man niemanden erkennt. Ueber die volle Breite braucht derselbe Text nur 294 px und passt damit in die Mindesthoehe. */ .kacheln{display:grid;gap:15px;grid-template-columns:minmax(0,1fr)} @media(min-width:560px){ .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(min-width:700px){ .kacheln{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(min-width:980px){ .kacheln{grid-template-columns:repeat(4,minmax(0,1fr))} } .kachel{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer; perspective:1000px;min-height:296px;text-align:left} /* Das Raster ist hier keine Kosmetik: .blatt ist ein , und bei einem Zeilenelement wirken width und height nicht. Das Raster hat genau ein Feld, in dem Vorder- und Rueckseite uebereinanderliegen -- frueher taten sie das absolut positioniert auf festen 296 px, und jeder Text, der laenger war, wurde abgeschnitten und bekam eine kaum sichtbare Rollleiste. Jetzt gibt die laengere der beiden Seiten die Hoehe vor, und das Raster daneben zieht die ganze Reihe mit. */ .kachel .blatt{display:grid;position:relative;width:100%;min-height:100%; transition:transform .65s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d} .kachel.um .blatt{transform:rotateY(180deg)} .kachel .vorn,.kachel .hinten{grid-area:1/1;position:relative;backface-visibility:hidden; border:1px solid var(--linie);border-radius:var(--r);padding:15px 16px; background:var(--karte);display:flex;flex-direction:column;justify-content:flex-end; overflow:hidden} .kachel .hinten{transform:rotateY(180deg);background:var(--flaeche2); justify-content:flex-start;font-size:.86rem;color:var(--tinte2); overflow-y:auto} /* Die inneren Elemente sind -- ohne `display:block` bleiben sie Zeilenelemente, und dann stimmen im Flex-Kasten weder Umbrueche noch Abstaende. */ .kachel .vorn>*,.kachel .hinten>*{display:block} /* Bei der Fotokachel stecken Name, Amt und der Hinweis nicht direkt in .vorn, sondern im Verlauf darueber -- die Regel eine Zeile hoeher greift dort nicht. Ohne das hier klebten sie in einer Zeile aneinander: "DietenbergerOberschuetzenmeisterANTIPPEN". */ .kachel .verlauf>*{display:block} /* Die Absaetze auf der Rueckseite. Der Abstand stand frueher als style am Element -- an einer Stelle, an der ihn niemand vermutet, der das Aussehen aendern will. */ .kachel .mehr{margin-top:8px} .kachel .mehr .absatz{display:block} .kachel .mehr .absatz + .absatz{margin-top:6px} /* Fotokachel: Das Bild fuellt die Vorderseite, Name und Amt liegen in einem Verlauf darauf. Der Verlauf ist nicht Dekoration, sondern das, was den Text auf einem beliebigen Foto lesbar haelt. */ .kachel .vorn.mitfoto{padding:0} /* Das Bild haengt an einem Punkt der Kachel: waagerecht mittig, senkrecht bei 42 %. Ohne eigenen Ausschnitt haengt es an seiner eigenen Mitte-oben (translate -50/-35), was fuer die meisten Fotos passt. Wer einen Ausschnitt einstellt, ueberschreibt beides mit einem style am Bild -- die Rechnung dazu steht in bild_stil(). min-width/min-height sind das Netz fuer Querformate: Sonst bliebe unter einem breiten Bild in einer hohen Kachel ein Loch. object-fit:cover sorgt dafuer, dass dabei beschnitten und nicht verzerrt wird. */ .kachel .foto{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none; object-fit:cover;object-position:50% 30%} .kachel .verlauf{position:relative;padding:40px 15px 14px;color:#fff; background:linear-gradient(to top,rgba(12,14,10,.88),rgba(12,14,10,.55) 55%,transparent)} .kachel .verlauf .kname{color:#fff} .kachel .verlauf .kamt{color:rgba(255,255,255,.82)} .kachel .verlauf .dreh{color:rgba(255,255,255,.7)} .kachel .initialen{font-family:Bitter,Georgia,serif;font-size:1.95rem;font-weight:800; color:var(--gruen);line-height:1;margin-bottom:auto} .kachel .kname{font-family:Bitter,Georgia,serif;font-weight:700;font-size:1rem; line-height:1.25;margin-bottom:2px} .kachel .kamt{font-size:.85rem;color:var(--tinte2);line-height:1.35} .kachel .dreh{font-size:.7rem;color:var(--tinte2);margin-top:8px;letter-spacing:.06em; text-transform:uppercase;opacity:.8} @media (prefers-reduced-motion: reduce){ .kachel .blatt{transition:none} } footer{border-top:1px solid var(--linie);background:var(--flaeche2); padding:26px 0 34px;font-size:.87rem;color:var(--tinte2)} footer .spalten{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} footer a{color:var(--gruen)} footer h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte2); margin-bottom:7px} /* ═══════════════════════════════════════ Handy: eigene Fassung, nicht nur enger ═══ */ .nur-klein{display:none} @media(max-width:760px){ .nur-gross{display:none !important} .nur-klein{display:block} } /* Klappmenue:
statt eines Skripts -- das funktioniert auch dann, wenn sonst nichts laedt. Jeder Eintrag ist 48 px hoch, damit man ihn mit dem Daumen trifft. */ .klappmenue{margin:0 0 12px} .klappmenue summary{list-style:none;cursor:pointer;display:flex;align-items:center; gap:9px;min-height:48px;padding:0 4px;font-weight:700;font-size:1.1rem; border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .klappmenue summary::-webkit-details-marker{display:none} .klappmenue summary::before{content:"≡";font-size:1.5rem;line-height:1} .klappmenue[open] summary::before{content:"×";font-size:1.5rem;line-height:1} .klappliste{display:flex;flex-direction:column;padding:6px 0 10px} .klappliste a{min-height:48px;display:flex;align-items:center;padding:0 6px; text-decoration:none;color:var(--tinte);font-weight:600;font-size:1.05rem; border-bottom:1px solid var(--linie)} .klappliste a.leise{color:var(--tinte2);font-weight:400;font-size:.95rem} /* Tabellen werden auf dem Handy zu Karten. Vier Spalten auf 375 px sind entweder unlesbar klein oder man schiebt sie seitwaerts -- beides ist Mist. */ .t-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r); padding:13px 15px;margin-bottom:10px} .t-karte h3{margin:0 0 8px;color:var(--gruen)} .t-feld{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:4px 0; border-top:1px solid var(--linie)} .t-feld dt{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase; color:var(--tinte2);font-weight:700;margin:0} .t-feld dd{margin:0;font-weight:600} /* Zwei Bloecke nebeneinander. Auf dem Handy untereinander -- zwei Spalten auf 375 px sind keine zwei Spalten, sondern zwei zu schmale. */ .paar{display:grid;gap:clamp(20px,3.5vw,40px);grid-template-columns:1fr; align-items:start;margin-bottom:clamp(30px,5vw,50px)} @media(min-width:820px){ .paar{grid-template-columns:1fr 1fr} } /* Innerhalb einer Spalte brauchen mehrere Bloecke Abstand -- nur der letzte nicht, sonst haengt unten Luft, die die beiden Spalten ungleich lang aussehen laesst. */ /* In einer Spalte begrenzt schon die Spalte die Zeilenlaenge -- die zusaetzliche Begrenzung auf 68 Zeichen laesst den Text frueher umbrechen als das Bild daneben breit ist, und die Spalte sieht ungleich aus. Ueber die volle Breite gilt sie weiterhin: Dort waere eine Zeile sonst zu lang zum Lesen. */ .paar p, .paar ul, .paar ol{max-width:none} .paar > div > section{margin-bottom:clamp(20px,3vw,32px)} .paar > div > section:last-child{margin-bottom:0} /* Kachel mit Bild: Das Bild fuellt die Breite und hat ein festes Verhaeltnis, damit eine Reihe gleich hoch bleibt. Der Text bekommt seinen eigenen Innenabstand -- das Bild soll bis an die Kante gehen. */ .karte.mitbild{padding:0;overflow:hidden} .karte.mitbild .k-text{padding:15px 17px} .k-rahmen{display:block;position:relative;width:100%;aspect-ratio:3/2;overflow:hidden; border-bottom:1px solid var(--linie)} .k-bild{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none; object-fit:cover} .karte.mitbild .mehr{display:block;padding:0 17px 15px} /* Trennlinie. Der Abstand ist groesser als zwischen normalen Bloecken -- eine Linie, die eng zwischen zwei Absaetzen klebt, trennt optisch nichts und sieht aus wie ein Versehen. */ .trenner{border-top:1px solid var(--linie);margin:clamp(30px,5vw,52px) 0} .trenner.beschriftet{border-top:0;display:flex;align-items:center;gap:16px; color:var(--tinte2)} .trenner.beschriftet::before,.trenner.beschriftet::after{ content:"";flex:1;border-top:1px solid var(--linie)} .trenner.beschriftet span{font-family:Bitter,Georgia,serif;font-size:.82rem; letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} /* Bloecke */ /* Ein Bild ohne Breitenbegrenzung wird in Originalgroesse gezeigt und sprengt die Seite -- bei einem 1600 px breiten Foto in einem 1280 px breiten Fenster laeuft es rechts hinaus. Die Regel ganz unten (img{max-width:100%}) ist das Sicherheitsnetz fuer jedes Bild, das kuenftig irgendwo dazukommt. */ .b-bild figure{margin:0} .b-bild img{display:block;width:100%;height:auto;border-radius:var(--r); border:1px solid var(--linie)} /* Vier Stufen in Prozent der Blockbreite -- dasselbe Bild kann in einer halben Spalte und ueber die ganze Seite stehen, ein fester Pixelwert waere an einer der beiden Stellen falsch. Linksbuendig, nicht mittig: Ein verkleinertes Bild in der Mitte laesst links und rechts Luft stehen, die wie ein Fehler aussieht. */ .b-bild.g-klein figure{max-width:34%} .b-bild.g-mittel figure{max-width:55%} .b-bild.g-gross figure{max-width:78%} @media(max-width:620px){ /* Auf dem Handy sind 34 % einer schmalen Spalte eine Briefmarke. */ .b-bild.g-klein figure{max-width:60%} .b-bild.g-mittel figure{max-width:80%} .b-bild.g-gross figure{max-width:100%} } .b-bild figcaption{font-size:.85rem;color:var(--tinte2);margin-top:7px} .b-rahmen iframe{width:100%;border:1px solid var(--linie);border-radius:var(--r); background:var(--karte)} .meldung-block{border-bottom:1px solid var(--linie);padding-bottom:22px;margin-bottom:22px} .meldung-block:last-child{border-bottom:0} .m-datum{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; color:var(--tinte2);font-weight:700} .meldung-block h2{margin:4px 0 10px} .meldung-block .bild{max-width:520px;margin-bottom:12px} /* Sicherheitsnetz: Kein Bild darf breiter werden als sein Platz. Ohne diese eine Zeile sprengt jedes Foto, das groesser als das Fenster ist, die ganze Seite -- und man sucht den Fehler beim Layout statt beim Bild. */ img{max-width:100%;height:auto}